@use 'sass:math';
@use 'sass:map';
@use './themes.scss' as *;

$theme-map-inner: null;
@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    $theme-map-inner: $theme-map !global;

    [setting-theme='#{$theme-name}'] & {
      @content;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map-inner, $key); // map-get($map,$key) 函数的作用是根据 $key，返回 $key 在 $map 中对应的值。比如themed(bgColor)返回 #ffffff 或 #1a1a1a。
}

@mixin set-color-mix-level($type, $number, $mode, $mix-color, $main-color) {
  --el-color-#{$type}-#{$mode}-#{$number}: #{mix($mix-color, $main-color, math.percentage(math.div($number, 10)))};
}

// 生成element-plus字体色阶，覆盖预设值
@mixin all-font-color-level($main-color, $isDarker: false) {
  @if $isDarker ==true {
    --el-text-color-primary: #{mix(#ffffff, $main-color, 10%)};
    --el-text-color-regular: #{$main-color};
    --el-text-color-secondary: #{mix(#000000, $main-color, 10%)};
    --el-text-color-placeholder: #{mix(#000000, $main-color, 20%)};
    --el-text-color-disabled: #{mix(#000000, $main-color, 30%)};
  } @else {
  }
}

// 生成element-plus主色色阶，覆盖预设值
@mixin all-color-level($type, $main-color, $isDarker: false) {
  @if $isDarker ==true {
    $bg-color: () !default;
    $bg-color: map.merge(
      (
        'page': #0a0a0a,
        '': #141414,
        'overlay': #1d1e1f
      ),
      $bg-color
    );

    @for $i from 1 through 9 {
      @include set-color-mix-level($type, $i, light, map.get($bg-color, ''), $main-color);
    }

    @include set-color-mix-level($type, 2, dark, #ffffff, $main-color);
  } @else {
    @for $i from 1 through 9 {
      @include set-color-mix-level($type, $i, light, #ffffff, $main-color);
    }

    @include set-color-mix-level($type, 2, dark, #000000, $main-color);
  }
}

body {
  @include themeify {
    //定义全局变量 start

    --el-text-color-regular: rgba(0, 0, 0, 0.65);
    --base-color: #{themed('baseColor')};
    --base-color-level2: #{themed('baseColorLevel2')};
    --info-color: #{themed('infoColor')};
    --success-color: #{themed('successColor')};
    --warning-color: #{themed('warningColor')};
    --danger-color: #{themed('dangerColor')};
    --bg-black-transparent: #{themed('blackTransparent')};
    --bg-color: #{themed('bgColor')};
    --bg-color-level2: #{themed('bgColorLevel2')};
    --bg-color-level3: #{themed('bgColorLevel3')};
    --bg-color-level4: #{themed('bgColorLevel4')};
    --bg-color-level5: #{themed('bgColorLevel5')};
    --bg-color-type2: #{themed('bgColorType2')};
    --bg-color-type2-level2: #{themed('bgColorType2Level2')};
    --bg-color-base: #{themed('bgColorBase')};
    --bg-color-base-level2: #{themed('bgColorBaseLevel2')};
    --bg-color-base-level3: #{themed('bgColorBaseLevel3')};
    --bg-color-base-level4: #{themed('bgColorBaseLevel4')};
    --bg-color-base-level5: #{themed('bgColorBaseLevel5')};
    --bg-color-base-hover: #{themed('bgColorBaseHover')};
    --bg-color-base-hover-level2: #{themed('bgColorBaseHoverLevel2')};
    --mask-color: #{themed('maskColor')};
    --border-color: #{themed('borderColor')};
    --border-color-level2: #{themed('borderColorLevel2')};
    --border-color-hover: #{themed('borderColorHover')};
    --border-color-base: #{themed('borderColorBase')};
    --border-color-base-level2: #{themed('borderColorBaseLevel2')};
    --font-size-base: 16px;
    --font-color-regular: #{themed('fontColorRegular')};
    --font-color-link: #{themed('fontColorLink')};
    --font-color-regular-transparent: #{themed('fontColorRegularTransparent')};
    --font-color-contrast: #{themed('fontColorContrast')};
    --font-color-contrast-transparent: #{themed('fontColorContrastTransparent')};
    --font-color-contrast-level2: #{themed('fontColorContrastLevel2')};
    --font-color-base-hover: #{themed('fontColorBaseHover')};
    --hover-color: #{themed('hoverColor')};
    --shadow-popper: #{themed('shadowPopper')};
    --menu-width: 260px;
    --el-menu-hover-bg-color: #{themed('hoverColor')};
    --header-height: 40px;
    --header-height-double: 80px;
    --header-height-negative: -40px;
    --header-height-negative-double: -80px;
    --panel-radius: #{themed('panelRadius')};
    --panel-border-color: #{themed('panelBorderColor')};
    --contrast-color: #{themed('contrastColor')};
    --agg-bg-type1: #2b137e;
    --agg-bg-type1-level2: #361f97;
    --agg-bg-type1-level3: #3e1bb7;
    --agg-border: #6037e8;
    --agg-border-lighter: #3d7fff;
    --agg-card-bg: rgba(27, 38, 116, 0.4);
    --agg-os-item-bg: linear-gradient(120deg, #ffffff 0%, #ffffff 50%, var(--agg-bg-type1) 50%, var(--agg-bg-type1-level2) 100%);
    --el-menu-bg-color: #{themed('menuBgColor')};
    --el-menu-text-color: #{themed('menuTextColor')};
    --el-menu-active-color: #{themed('menuTextColor')};
    //定义全局变量 end

    //覆盖element-plus预设值 start
    @include all-color-level(primary, themed('baseColor'), themed('isDarker'));
    @include all-color-level(success, themed('successColor'), themed('isDarker'));
    @include all-color-level(info, themed('infoColor'), themed('isDarker'));
    @include all-color-level(warning, themed('warningColor'), themed('isDarker'));
    @include all-color-level(danger, themed('dangerColor'), themed('isDarker'));
    @include all-color-level(error, themed('dangerColor'), themed('isDarker'));
    @include all-font-color-level(themed('fontColorRegular'), themed('isDarker'));
    --el-font-family: 'Microsoft YaHei', '微软雅黑';
    --el-color-primary: #{themed('baseColor')};
    --el-bg-color: #{themed('bgColorLevel2')};
    --el-bg-color-overlay: #{themed('bgColor')};
    --el-border: #{themed('borderColorLevel2')};
    --el-border-color: #{themed('borderColorLevel2')};
    --el-border-color-hover: #{themed('borderColorHover')};
    --el-border-color-light: #{themed('borderColor')};
    --el-border-color-lighter: #{themed('borderColor')};
    --el-border-color-dark: #{themed('borderColor')};
    --el-table-row-hover-bg-color: #{themed('hoverColor')};
    --el-dropdown-menuItem-hover-fill: #{themed('hoverColor')} !important;
    --el-dropdown-menuItem-hover-color: #ffffff !important;
    --el-fill-color-blank: #{themed('bgColor')};
    // --el-transition-duration: #{themed("transitionDuration")};
    // --el-transition-duration-fast: #{themed("transitionDuration")};
    --el-text-color-disabled: #{themed('fontColorRegularTransparent')};
    --el-fill-color: #{themed('bgColorLevel2')};
    --el-fill-color-light: #{themed('hoverColor')};
    --el-mask-color: #{themed('maskColor')};
    --el-font-size-base: var(--font-size-base);
    --el-border-radius-base: 2px;
    --el-border-radius-small: 0;
    --el-menu-item-height: 49px;
    --el-pagination-font-size: 16px;
    .el-tabs__item {
      padding: 0 17px;
      font-size: 16px;
      font-weight: bold;
      padding-bottom: 6px;
      color: rgba(0, 0, 0, 0.65);
    }
    .el-tabs__item.is-active {
      color: var(--el-color-primary);
    }
    .el-button + .el-button {
      margin-left: 10px;
    }

    .el-tabs__header {
      padding: 10px 0 0 13px;
      background-color: #fff;
      border-radius: 6px;
    }
    .el-switch__core {
      height: 22px;
      border-radius: 11px;
    }
    .el-switch__core .el-switch__action {
      width: 18px;
      height: 18px;
    }
    .el-switch__core .el-switch__inner {
      height: 18px;
      padding: 0 4px 0 calc(19px + 2px);
    }
    .el-switch.is-checked .el-switch__core .el-switch__inner {
      padding: 0 calc(19px + 2px) 0 4px;
    }
    .el-switch.is-checked .el-switch__core .el-switch__action {
      left: calc(100% - 19px);
    }
    .el-switch__core .el-switch__inner .is-icon,
    .el-switch__core .el-switch__inner .is-text {
      font-size: 14px;
    }
    .el-button {
      display: inline-flex;
      align-items: center;
      // color: #{themed('baseColor')};
      border-radius: 3px;
      border: 1px solid #{themed('buttonBorder')};
    }

    .el-button:hover {
      background-color: #{themed('baseColor')};
      color: #{themed('menuTextColor')};
      border: 1px solid #{themed('baseColor')};
    }
    .el-table tr .el-button {
      border: none;
      color: #{themed('baseColor')};
    }
    .el-table tr .el-button:hover {
      // color: #{themed('menuTextColor')};
    }
    .el-button.is-disabled,
    .el-button.is-disabled:hover
     {
      color: rgba(0, 0, 0, 0.25);
      cursor: not-allowed;
      background-image: none;
      background-color: #f5f5f5;
      border: 1px solid rgba(0, 0, 0, 0.15);
    }
    .el-table tr .el-button.is-disabled,
    .el-table tr .el-button.is-disabled:hover {
      color: rgba(0, 0, 0, 0.25);
      cursor: not-allowed;
      background-image: none;
      background-color: #f5f5f5;
      border: none;
    }
    .el-input {
      .el-input__wrapper {
        .is-focus {
          box-shadow: 0 0 0 2px #{themed('border-color-hover')} !important;
        }
      }

      &.is-disabled {
        .el-input__wrapper {
          background-color: themed('bgColorLevel4') !important;
          box-shadow: 0 0 0 1px themed('borderColor') inset !important;
        }
      }
    }

    .el-form-item {
      margin-bottom: 16px !important;
      // margin-bottom: 10px !important;
    }

    .el-form--label-top {
      .el-form-item {
        .el-form-item__label {
          margin-bottom: 0 !important;
        }
      }
    }
    .el-checkbox {
      --el-checkbox-input-border: 1px solid #{themed('borderColor')};
    }
    .el-radio {
      --el-radio-input-border: 1px solid #{themed('borderColor')};
    }
    .el-table {
      --el-table-border-color: #{themed('borderColor')};
      --el-table-row-hover-bg-color: #{themed('elTableRowHoverBgColor')};
      --el-table-tr-bg-color: #{themed('bgColorLevel2')};
      --el-table-header-bg-color: #{themed('bgColorType2')};
      --el-table-border: 1px solid #{themed('borderColor')};
      .el-table__inner-wrapper {
        &::before {
          background-color: transparent;
        }
      }

      .el-table__cell {
        &.el-table__expanded-cell {
          background-color: transparent !important;
        }
      }
      font-size: 16px;
      .el-table__row {
        height: 46px;
      }
      .el-table__row:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.02); /* 设置偶数行的背景颜色 */
      }
    }
    .el-pager li {
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 3px;
    }
    .el-pager li:hover {
      color: var(--el-pagination-hover-color);
      border: 1px solid var(--el-pagination-hover-color);
    }
    .el-pager li.is-active {
      font-weight: inherit;
    }
    .el-pager .el-message {
      border-radius: 2px !important;
      min-width: 240px;
      text-align: center;
    }

    .el-tree {
      font-size: 14px;
      .el-tree-node {
        color: #333;
        .el-tree-node__content {
          @apply pr-3;
        }
      }
    }

    .el-breadcrumb {
      .el-breadcrumb__item {
        .el-breadcrumb__inner {
          a {
            font-weight: normal;
            transition: all 0.1s;
          }
        }

        .el-breadcrumb__separator {
          font-weight: normal;
          font-size: 0.8rem;
        }
      }
    }

    .el-date-picker {
      .el-picker-panel__icon-btn {
        margin-top: 0;
      }
    }
    //覆盖element-plus预设值 end
    background-color: #{themed('bgColor')};

    // 页面自定义class单独设置
    .tree-title,
    #myGroup h1 {
      color: #{themed('fontColorRegular')};
    }
    .tree-box {
      background-color: #{themed('bgColor')};
      border-right: 1px solid #{themed('menuBorder')};
    }
    .open-tree {
      background-color: #{themed('bgColor')};
      border: 1px solid #{themed('borderColor')};
      color: #{themed('fontColorRegular')};
    }
    .open-tree:hover {
      border: 1px solid #{themed('borderColorHover')};
      .open-icon {
        color: #{themed('contrastColor')};
      }
    }
    .main,
    .main .main-box {
      background-color: #{themed('bgColorLevel4')};
      color: #{themed('fontColorRegular')};
    }
    .setting-box,
    .menu {
      background-color: #{themed('bgColor')};
    }
    .menu-box {
      background-color: #{themed('menuBgColor')};
    }
    .outreach-box,
    #myGroup {
      background-color: #{themed('bgColorLevel2')};
    }
    .setting-title {
      background-color: #{themed('bgColor')};
      color: #{themed('fontColorRegular')};
    }
    // #Monitor{
    //     background-color: #{themed("bgColor")};
    // }
    .el-menu-item-group__title {
      display: none;
      padding-top: 0;
      padding-bottom: 0;
    }
    .el-tabs__nav-wrap::after {
      height: 0;
    }
    .el-tabs__content {
      background-color: #{themed('bgColorLevel4')};
      font-size: 14px;
    }
    .el-dialog__body .el-tabs__content {
      background-color: #{themed('bgColor')};
    }
    .el-menu-item.is-active {
      background-color: #{themed('menuActiveBcakground')};
      border-right: 2px solid #{themed('menuActiveBorder')};
      font-weight: bold;
      color: #fff !important;
    }
    .tree-container {
      background-color: #{themed('bgColor')};
    }

    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      background-color: #fff;
      color: #{themed('baseColorLevel2')};
      font-weight: bold;
    }
    .el-dialog {
      padding: 0 0 16px 0;
    }
    .el-dialog__footer {
      padding-top: 0;
      display: flex;
      justify-content: center;
    }
    .el-dialog__header {
      padding: 11px 24px;
      background-color: #f4f5f9;
      margin-bottom: 16px;
    }
    .el-dialog__body {
      padding: 0 16px;
    }
    .el-message-box__btns {
      flex-direction: row-reverse;
      .el-button + .el-button {
        margin-right: 10px;
      }
    }
    .el-dialog__body .table-header {
      padding: 4px 0 10px 10px;
    }
  }
}

.hide-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
}

.custom-scrollbar {
  &,
  * {
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: var(--bg-color-level5);

      &:hover {
        background-color: var(--hover-color);
      }
    }

    &::-webkit-scrollbar-track {
      border-radius: 3px;
      background-color: transparent;
    }
  }
}

.user-popper {
  width: 140px;
}

#nprogress {
  .bar {
    @include themeify {
      background: themed('baseColor');
      box-shadow: none;
      height: 2px;
      @apply z-20;
      // z-index: 0;
      // @apply top-10;
    }

    .peg {
      display: none !important;
    }
  }
}

.el-divider {
  border-top: 1px solid var(--border-color) !important;
}

.el-popper {
  --el-dropdown-menuItem-hover-fill: var(--hover-color) !important;
  --el-dropdown-menuItem-hover-color: var(--el-text-color-regular) !important;
  border: none !important;
  background-color: var(--bg-color-level2) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-popper) !important;
  color: var(--font-color-regular) !important;

  .el-dropdown-menu {
    background-color: var(--bg-color-level2) !important;

    .el-dropdown-menu__item {
      &:not(.is-disabled) {
        &:focus {
          // background-color: var(--hover-color) !important;
        }
      }
    }
  }

  .el-popper__arrow {
    &::before {
      border-color: var(--bg-color-level2) !important;
      background-color: var(--bg-color-level2) !important;
    }
  }

  .el-tree-select__popper {
    background-color: var(--bg-color);
  }
}

.het-panel {
  @apply p-6;
  // border: 1px solid var(--panel-border-color);
  padding: 20px;
  background: var(--bg-color-level2);
  border-radius: 5px; //var(--panel-radius);;
}

h1,
.h1 {
  font-size: 2rem;
  line-height: 1.14286;
  font-weight: 400;
  letter-spacing: -0.00893em;
  font-family: Inter, Helvetica, Arial, sans-serif;
}

h2,
.h2 {
  margin: 0px 0px 0.45em;
  font-size: 1.57143rem;
  line-height: 1.09091;
  font-weight: 400;
  letter-spacing: 0em;
  font-family: Inter, Helvetica, Arial, sans-serif;
}

.h1-desc {
  color: var(--font-color-regular-transparent);
}

.asset-tree {
  .el-tree-node {
    &.active {
      background-color: var(--hover-color) !important;
    }

    &.first > .el-tree-node__content > .el-tree-node__label {
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.menu-item-new {
  .arrow {
    border-right: 8px solid var(--bg-color-level2);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }

  &.active {
    color: var(--font-color-contrast-level2);
    background-color: var(--bg-color-base-hover) !important;

    &::before {
      content: '';
      position: absolute;
      background-color: var(--bg-color-base-hover-level2) !important;
      width: 4px;
      height: 100%;
      left: 0;
      top: 0;
    }
  }
}

.submenu-item-new {
  &.active {
    background-color: var(--bg-color-base-level5);
    color: var(--font-color-base-hover);
    font-weight: bold;

    svg {
      color: var(--font-color-base-hover);
    }
  }
}

.text-disabled {
  color: var(--font-color-regular-transparent);
  pointer-events: none;
}

.verticle-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-popper {
  &.full-popper {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: auto;
    background: transparent !important;

    .overlay {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--mask-color) !important;

      .content {
        padding: 16px;
        background-color: var(--bg-color);
        max-width: 80%;
        max-height: 80%;
        overflow-y: scroll;
      }
    }
  }
}
